<template>
	<div class="search">
		<!-- 搜索 -->
		<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_1533371_dyvu8g4uh7f.css" />
		<input class="inputer" type="text"  placeholder="搜索音乐,视频,歌词,电台" v-model="initial" 
		v-on:input="change">
		<button class="sousuo">
			<i class="iconfont icon-sousuo"></i></button>
		<button class="delete" @click="deletedata">
			<i class="iconfont icon-delete"></i>
		</button>
		<!-- <song  v-for="(item,index) in searcher" :key="index" :songData="{
			songName:item.name,
			Img:item.img1v1Url,
			id:item.id,
		}"
		></song> -->
		
		<ul class="hotBot">
			<p>热门搜索：</p>
			<li v-for="(item,index) in searchot" :key="index">{{item.first}}</li>
		</ul>
	</div>
</template>

<script>
	import api from '../js/api.js'
	import song from '../components/song.vue'
	export default {
		name: 'inputer',
		data() {
			return {
				searcher: {
					result: {
						songs: {
							name: '',
						}
					}
				},
				initial: '',
				searchData:'',
				searcher:[],
				searchot: [],
			}
		},
		created() {
			this.axios({
				url: api.searcher+this.initial 
			}).then(res => {
				window.console.log(res)
				this.searcher = res.data.result;
				window.console.log(this.searcher);
			});
			this.axios({
				url: api.searchot
			}).then(res => {
				window.console.log(res)
				this.searchot = res.data.result.hots;
				window.console.log(this.searchot);
			});
			
		},
		methods: {
			change() {
				window.console.log(this.initial)
			},
			
			deletedata() {
				this.initial = '';
				window.console.log("数据被清除了", this.initial);
			},
		},
		components:{
			song
		},

	}
</script>

<style lang="scss" scoped>
	.search {
		width: 100%;

		.inputer {
			outline: 0;
			height: 30px;
			width: 350px;
			position: relative;
			margin-top: 10px;
			margin-left: 10px;
			padding-left: 32px;
			border-radius: 18px;
			-moz-appearance: none;
			-web-kit-appearance: none;
			border: 1.1px solid #000000;
			background-color: #C8C9CC;
		}

		.delete {
			background-color: white;

			i {
				left: 240px;
				bottom: 32px;
				font-size: 22px;
				margin-left: 10px;
				position: relative;
			}
		}

		.sousuo {
			padding-right: 30px;
			background-color: white;

			i {
				bottom: 32px;
				font-size: 22px;
				position: relative;
			}
		}
		
		.hotBot {
			width: 300%;
			padding: 8px;

			li {
				height: 32px;
				text-align: left;
			}

			p {
				text-align: left;
			}
		}
	}
</style>
